<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>04-事件操作</title>
    <script src="../js/jquery-3.6.0.js"></script>
    <script>
      /*单击事件*/
      $(function () {
        $("#btn1").click(function () {
          alert("被单机了")
        });

        $("#btn2").dblclick(function () {
          alert("被双机了")
        });


      /*焦点事件*/
      $("input[name=username]").focus(function () {
        console.log("获得焦点");
      });

      $("input[name=username]").blur(function () {
        console.log("失去焦点");
      });

     /*改变事件*/
      $("select[name=city]").change(function () {
          alert($(this).val());
      });

      /*鼠标事件*/
      /*  $("div").mouseenter(function () {
          $(this).css("backgroundColor","pink");
        });

        $("div").mousemove(function () {
          $(this).css("backgroundColor","pink");
        });

        $("div").mouseleave(function () {
          $(this).css("backgroundColor","red");
        });*/

        /*hover切换移入移出*/
        $("div").hover(function () {
          $("div").mouseenter(function () {
            $(this).css("backgroundColor","pink");
          });

          $("div").mouseleave(function () {
            $(this).css("backgroundColor","red");
          });
        });

        /*键盘事件*/
        $("body").keydown(function () {
          $(this).css("backgroundColor","red");
        });

        $("body").keyup(function () {
          $(this).css("backgroundColor","green");
        });

      })
    </script>
</head>
<body>
    <div id="box1" style="width: 200px;height: 200px;background-color: #f700ff">盒子</div>
    <button id="btn1">单击事件</button>
    <button id="btn2">双击事件</button>
    <hr>
    <input type="text" name="username" placeholder="请输入用户名：" value="">
    <hr>
    故乡：<select name="city" id="city">
      <option>北京</option>
      <option>上海</option>
      <option>广州</option>
      <option>武汉</option>
    </select>
    密码：<input type="password" placeholder="请输入密码">
</body>
</html>